<template>
	<div class="p-4">
		<sh-card v-bind="card1" class="mb-3"></sh-card>
		<sh-card v-bind="card2" class="mb-3">
			<div>ASDASDAS</div>
			<template #extra>
				<a>更多</a>
			</template>
		</sh-card>
		<sh-card v-bind="card3" class="mb-3">
			<div>ASDASDAS</div>
			<template #foot>
				<div>给大哥点点关注</div>
			</template>
		</sh-card>
		<sh-card v-bind="card4" class="mb-3">
			<div>ASDASDAS</div>
		</sh-card>
		<sh-card v-bind="card5" class="mb-3">
			<div>ASDASDAS</div>
		</sh-card>
	</div>
</template>

<script>
export default {
	name: 'BaseCard',
	data() {
		return {
			card1: {
				title: '头',
				icon: 'ios-film-outline'
			},
			card2: {
				title: '头+体',
				icon: 'ios-film-outline'
			},
			card3: {
				shadow: true,
				title: '头+体+尾',
				icon: 'ios-film-outline'
			},
			card4: {
				border: false,
				title: '无边框，无图标'
			},
			card5: {
				border: false,
				shadow: true,
				title: '无边框，无图标，有阴影'
			}
		}
	}
}
</script>

<style scoped lang="scss"></style>
